<!DOCTYPE html>
<html>
<head>
    <title>KISSY-Animation</title>
    <script src="/kissy/build/seed-debug.js"></script>
    <script src="/kissy/src/package.js"></script>
    <script type="text/javascript" src="/kissy/tools/third-party/gsap/TweenLite.js"></script>
    <script type="text/javascript" src="/kissy/tools/third-party/gsap/CSSPlugin.js"></script>
    <style type="text/css">
        html, body {
            overflow: hidden;
        }

        body {
            background-color: #000000;
            margin: 0;
            padding: 0;
            color: #CCCCCC;
            font-family: Signika Negative, Asap, sans-serif;
            font-weight: 300;
            font-size: 17px;
            line-height: 150%;
        }

        li {
            display: inline-block;
            list-style: none;
        }
    </style>
</head>
<body>

<div id="footer">
    <form id="form">
        <ul>
            <li>
                Dots:
                <select id="dotQuantity" size="1">
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                    <option value="300" selected="selected">300</option>
                    <option value="400">400</option>
                    <option value="500">500</option>
                    <option value="750">750</option>
                    <option value="1000">1000</option>
                    <option value="1250">1250</option>
                    <option value="1500">1500</option>
                    <option value="2000">2000</option>
                    <option value="2500">2500</option>
                    <option value="3000">3000</option>
                </select>
            </li>
            <li>
                Duration:
                <select id="duration" size="1">
                    <option value="0.5">0.5 seconds</option>
                    <option value="0.75" selected="selected">0.75 seconds</option>
                    <option value="1">1 second</option>
                    <option value="5">5 seconds</option>
                    <option value="58">58 seconds</option>
                </select>
            </li>
            <li>
                Engine:
                <select id="engine" size="1">
                    <option value="kissy">KISSY-Animation</option>
                    <option value="transition">KISSY-Transition</option>
                    <option value="gsap">GSAP</option>
                </select>
            </li>
            <li>
                <button id="start" type="button" value="test"> START</button>
            </li>
        </ul>
    </form>
    <div id="container"></div>
</div>
</body>
<script type="text/javascript">
    KISSY.use('anim/timer,node,anim/transition', function (S, Anim, $, Transition) {
        var win = $(window);
        var inProgress;
        var centerX, centerY;
        var button = document.getElementById("start"),
                dotQtyInput = document.getElementById("dotQuantity"),
                engineInput = document.getElementById("engine"),
                container = document.getElementById("container");
        var tests = {};
        var duration = 0.75;
        var rawDots;

        tests.kissy = {
            milliseconds: true,
            tween: function (dot) {
                dot.style.cssText = startingCSS;
                var angle = Math.random() * Math.PI * 2;
                var anim = new Anim(dot, {
                            left: Math.cos(angle) * radius + centerX,
                            top: Math.sin(angle) * radius + centerY,
                            width: 32,
                            height: 32
                        }, {
                            duration: duration,
                            delay: Math.random() * duration,
                            complete: function () {
                                tests.kissy.tween(dot)
                            }
                        }
                );
                anim.run();
            },
            stop: function (dot) {
                //dot.stop(true);
                Anim.stop(dot);
            },
            nativeSize: false
        };

        tests.transition = {
            milliseconds: true,
            tween: function (dot) {
                dot.style.cssText = startingCSS;
                var angle = Math.random() * Math.PI * 2;
                var anim = new Transition(dot, {
                            left: Math.cos(angle) * radius + centerX + 'px',
                            top: Math.sin(angle) * radius + centerY + 'px',
                            width: 32 + 'px',
                            height: 32 + 'px'
                        }, {
                            duration: duration,
                            delay: Math.random() * duration,
                            complete: function () {
                                tests.kissy.tween(dot)
                            }
                        }
                );
                anim.run();
            },
            stop: function (dot) {
                //dot.stop(true);
                Anim.stop(dot);
            },
            nativeSize: false
        };

        //GSAP (TweenLite) top/left/width/height
        tests.gsap = {
            milliseconds: false,
            tween: function (dot) {
                var angle = Math.random() * Math.PI * 2;
                dot.style.cssText = startingCSS;
                TweenLite.to(dot, duration, {css: {left: Math.cos(angle) * radius + centerX,
                    top: Math.sin(angle) * radius + centerY,
                    width: 32,
                    height: 32
                },
                    delay: Math.random() * duration,
                    ease: Cubic.easeIn,
                    overwrite: "none",
                    onComplete: tests.gsap.tween,
                    onCompleteParams: [dot]});
            },
            stop: function (dot) {
                TweenLite.killTweensOf(dot);
            },
            nativeSize: false
        };
        inProgress = false;
        var currentTest;

        function toggleTest() {
            duration = parseFloat($('#duration').val());
            inProgress = !inProgress;
            if (inProgress) {
                button.innerHTML = " STOP ";
                currentTest = tests[engineInput.value];
                size = (currentTest.nativeSize ? "16px" : "1px");
                centerX = win.width() / 2;
                centerY = win.height() / 2 - 30;
                startingCSS = "position:absolute; left:" + centerX + "px; top:" +
                        centerY + "px; width:" + size + "; height:" + size + ";";
                radius = Math.sqrt(centerX * centerX + centerY * centerY);

                //创建节点
                createDots();
                i = dots.length;
                while (--i > -1) {
                    currentTest.tween(dots[i]);
                }
            } else {
                button.innerHTML = " Start ";
                i = dots.length;
                while (--i > -1) {
                    currentTest.stop(dots[i]);
                    container.removeChild(rawDots[i]); //removes dot(s)
                }
            }
        }

        document.getElementById('start').onclick = toggleTest;

        var ticker = TweenLite.ticker;
        ticker.fps(100);
        ticker.useRAF(false);
        var dots = [];
//创建测试点
        function createDots() {
            var i = Number(dotQtyInput.value), dot;
            dots = [];
            rawDots = [];
            while (--i > -1) {
                dot = document.createElement("img");
                dot.src = "dot.png";
                dot.width = 10;
                dot.height = 10;
                dot.id = "dot" + i;
                dot.style.cssText = startingCSS;
                container.appendChild(dot);
                rawDots.push(dot);
                dots.push(dot);
            }
        }
    });
</script>
</html>